<template>
	<view class="category">
		<view class="nav">
			<scroll-view
				class="bg"
				scroll-y="true" 
				:scroll-top="scrollTop" 
				:scroll-with-animation="true">
				<view class="nav-item" 
					:class="{'ac':active == index}" 
					v-for="(item,index) in classifcationTypeList" 
					:key="index" 
					@click="changeNav(index, item.id)">
						{{ item.cateName }}
					</view>
			</scroll-view>
		</view>
		<view class="goodsBox">
			<scroll-view 
				scroll-y="true" >
				<view class="goods">
					<view class="goods-item" @click="handleJumpDetails(item.id)" v-for="(item,index) in goodsList" :key="index">
						<image :src="item.detailsOne" mode=""></image>
						<view class="content">
							<text>{{ item.productName }}</text>
							<text class="price">¥{{ item.originalPrice }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref, nextTick, reactive } from "vue";
import { classificationQueryAll, queryProductsByPage } from "@/api/classifcation/classifcation.js"
import { onShow, onLoad } from "@dcloudio/uni-app";
const active = ref(0);
const scrollTop = ref(0);
const height = ref(0);
onShow(() => {
	handleGetClassification();
})

onLoad(() => {
	// handleGetClassification();
})

const goodsList = ref([]); // 分类下对应 ==> 商品列表
const handleGetGoodsList = (cateId) => {
	const params = {
		cateId,
		page: 1,
		size: 20
	}
	queryProductsByPage(params).then(res => {
		const { code, data: { data } } = res;
		data.forEach(item => {
			item.detailsOne = item.carouselImg && item.carouselImg.split(',')[0]
		})
		if (code === 200) {
			goodsList.value = data;
		}
	})
}

const handleJumpDetails = (id) => { // 跳转商品详情
	uni.navigateTo({
		url: `../goodsDetails/goodsDetails?goodsId=${id}`
	})
}

const classifcationTypeList = ref([]); // 分类列表

const handleGetClassification = () => { // 获取分类数据
	classificationQueryAll().then(res => {
		const { code, data } = res;
		if (code === 200) {
			classifcationTypeList.value = data;
			if (classifcationTypeList.value.length) {
				const typeId = classifcationTypeList.value[0].id;
				handleGetGoodsList(typeId)
			}
		}
	})
}

nextTick(() => {
	let navHeight = uni.createSelectorQuery().select(".nav-item");
	navHeight.boundingClientRect((data)=> {
		height.value =  data && data.height;
	}).exec();
});

const changeNav = (index, id) => { // 侧边切换分类
	active.value = index;
	scrollTop.value = height.value * (index - 2);
	handleGetGoodsList(id);
}
</script>

<style lang="scss" scoped>
@import '../../static/css/public.scss';

.category{
	display: flex;
	position: absolute;
	width: 100%;
	height: calc(100% - var(--status-bar-height));
	
	/* 隐藏滚动条样式 */
	::-webkit-scrollbar {
		@include wh(0, 0);
	}
	
	uni-scroll-view {
		height: 100%;
	}
	
	.bg {
		background:#F7F8F9 ;
	}
	
	.nav {
		width: 200rpx;
		
		.nav-item {
			@include wh(200rpx, 110rpx);
			line-height: 104rpx;
			background: #F7F8F9;
			@include sc(28rpx, #505660);
			text-align: center;
			position: relative;
		}
		.ac{
			@include sc(30rpx, #FC4353);
			background: #fff;
		}
		.ac:before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 32rpx;
			@include wh(9rpx, 40rpx);
			background-color: #FC4353;
			border-radius: 5rpx;
		}
	}
	
	.goodsBox{
		width: 550rpx;
		padding-left: 50rpx;
		
		.goods{
			display: flex;
			// flex-wrap: wrap;
			padding: 30rpx 0;
			flex-direction: column;
			
			.goods-item{
				// @include wh(150rpx, 150rpx);
				text-align: center;
				margin-bottom: 56rpx;
				margin-right: 35rpx;
				display: flex;
				
				image{
					display: block;
					@include wh(120rpx, 120rpx);
					// margin: 0 auto 32rpx;
					border-radius: 4rpx;
				}
				
				.content {
					flex: 1;
					padding-left: 10rpx;
					
					text {
						text-align: left;
						@include showEllipsis(2);
						@include sc(26rpx, #505660);
					}
					
					.price {
						padding-top: 12rpx;
						color: #FC4353;
					}
				}
			}
		}
	}
}
</style>
